<template>
	<div class="top_card">
		<el-row :gutter="12">
			<div :class="['top_card_item', item.click ? 'pointer' : '']" v-for="(item, index) in informationList"
				:key="index" @click="handerClick(item)">
				<el-col :lg="{ span: span }">
					<el-row :class="['card', item.className]" :style="{ background: item.background }">
						<el-main>
							<el-row type="flex" justify="space-between">
								<el-col :span="14">
                  <div class="ininform">{{ item.lable }}<span>{{ item.unit }}</span></div>
									<div class="innum" v-if="item && item.dataNumber">{{ item.dataNumber }}</div>
									<div class="innum" v-else>0</div>
								</el-col>
								<el-col :span="10">
									<div style="text-align: right">
										<el-image class="imgSty" lazy :src="item.imgs"></el-image>
									</div>
								</el-col>
							</el-row>
						</el-main>
						<el-footer>
							<div class="bottom_btn" v-show="item.bottomBtn">
								<el-button type="text" size="mini" @click="showDialog(index)">{{ item.bottomBtn }} <i
										class="iconfont icon-arrow-right-line"></i></el-button>
							</div>
						</el-footer>
					</el-row>
				</el-col>
			</div>
		</el-row>
		<!--    <vehicle-data-dialog ref="dialogRef"></vehicle-data-dialog>-->
	</div>
</template>

<script>
// import {carInfoList, overviewAllCount} from "@/api/vehicleOffical";
// import VehicleDataDialog from "@/views/vehicleSituation/official/components/dialogComponents/VehicleDataDialog";

export default {
	name: 'analysisTopCard',
	description: '总览顶部卡片',
	components: {
		// eslint-disable-next-line no-undef
		// VehicleDataDialog
	},
	props: {
		informationList: {
			type: Array,
			default: () => []
		},
		span: {
			type: String,
			default: () => '24-3'
		}
	},
	data() {
		return {
			spanNum: 0
		}
	},
	mounted() {
		this.spanNum = this.informationList.length
	},
	methods: {
		handerClick(item) {
			this.$emit('handerClick', item)
		},
		showDialog(index) {
			if (index == 1) {
				this.$refs.dialogRef.openDialog(0, [], (status, target) => {
					if (status) {
						this.getOverviewAllCount()
						this.$emit('refresh', status)
					}
				})
			} else if (index == 3) {
				this.$refs.dialogRef.openDialog(3, [], (status, target) => {
					if (status) {
						this.getOverviewAllCount()
						this.$emit('refresh', status)
					}
				})
			} else if (index == 4) {
				this.$refs.dialogRef.openDialog(2, [], (status, target) => {
					if (status) {
						this.getOverviewAllCount()
						this.$emit('refresh', status)
					}
				})
			} else if (index === 2) {
				this.$refs.dialogRef.openDialog(5, [], (status, target) => {
					if (status) {
						this.getOverviewAllCount()
						this.$emit('refresh', status)
					}
				})
			}
			this.$refs.dialogRef.visible = true
		}
	}
}
</script>

<style lang="scss">
@import "src/styles/mixin";

@media (min-width: 992px) {
	.el-col-lg-24-2 {
		width: 100%;
	}

	.el-col-lg-24-3 {
		width: 100%;
	}

	.el-col-lg-24-5 {
		width: 33.3%;
	}

	.el-col-lg-24-6 {
		width: 33.3%;
	}

}

@media (min-width: 1350px) {
	.el-col-lg-24-2 {
		width: 50%;
	}

	.el-col-lg-24-3 {
		width: 33.3%;
	}

	.el-col-lg-24-5 {
		width: 20%;
	}

	.el-col-lg-24-6 {
		width: 16.66%;
	}

}

.el-col-lg-24-5 {
	padding-right: 6px !important;
	padding-left: 6px !important;
}

.top_card_item {
	//.el-col-lg-24-5:first-child .el-col-lg-24-5:last-child{
	//  padding-left: 20px!important;
	//}
}

.card {
	@include basicStyle(126, 270, #16c3db, #40decb);
	margin-bottom: 20px;
	padding: 20px 0 0 20px;

	//height: 100px;
	.innum {
		@include fontStyle(32, Helvetica-Bold, Helvetica, bold, #ffffff);
		padding: 7px 0 10px;
	}

	.ininform {
		@include fontStyle(16, PingFang SC-Regular, PingFang SC, 400, #ffffff);
    span{
      font-size: 14px;
    }
	}

	.imgSty {
		width: 90px;
		height: 90px;
    object-fit: scale-down;
	}

	.el-main {
		padding: 0;
		overflow: hidden;
	}

	.el-footer {
		display: flex;
		float: right;
		padding: 0;
		height: auto !important;

	}

	.bottom_btn {
		display: flex;
		position: absolute;
		padding: 0 16px;
		right: 0;
		bottom: 0;
		border-radius: 20px 0 12px 0;
		background: rgba(255, 255, 255, 0.3);
		box-shadow: 0 8px 12px 2px rgba(208, 214, 221, 0.21);

		.el-button--text {
			color: #FFFFFF;
			line-height: 4px;

			.iconfont {
				font-size: 12px;
			}
		}

		.el-button--text:focus {
			color: #e7e7e7;
		}
	}
}

.pointer {
	cursor: pointer !important;
}
</style>
